/**
 * 应用组件
 */

import React, {Component} from 'react'
import CommentAdd from '../CommentAdd/CommentAdd'
import CommentList from '../CommentList/CommentList'

// 定义组件类
class App extends Component {
    constructor (props) {
        super(props)
        let time =new Date().getTime();
        let time2=Date.now();
        this.state = {
            comments: [
                {time:time,name:'tom',content:'good'},
                {time:time,name:'john',content:'bad'}
            ]
        };

        // 绑定this
        this.addComment=this.addComment.bind(this)
        this.deleteComment=this.deleteComment.bind(this)
    }


    addComment(comment){
        const comments=this.state.comments
        // 添加到第一位
        comments.unshift(comment)
        this.setState({comments})

    }

    deleteComment = (index) =>{
        const comments=this.state.comments
        // 删除指定下标元素
        comments.splice(index, 1);
        this.setState({ comments });
    }

    render(){
        return(
                <div>
                    <header classNameName="site-header jumbotron">
                        <div className="container">
                            <div className="row">
                                <div className="col-xs-12">
                                    <h1>请发表对React的评论</h1>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div className="container">
                        <CommentAdd addComment={this.addComment} />
                        <CommentList comments={this.state.comments} deleteComment={this.deleteComment}/>
                    </div>
                </div>
        )
    }
}
export default App
// 默认暴露
